<template>
  <div id="page" @click="hideToop">
    <div class="header">
      <c-title :hide="false" text="管理页面"></c-title>
    </div>
    <div class="tabarr">
      <div class="tabli" :class="{ tab_active: tabInd == 0 }" @click="selectTab(0,'ji')">基础数据</div>
      <div class="tabli" :class="{ tab_active: tabInd == 1 }" @click="selectTab(1,'per')">人力数据</div>
    </div>

    <div class="content" :style="{ display: tabInd == 0 ? 'block' : 'none' }">
      <div class="top">
        <div class="datacalss">
          <img src="../../../assets/images/hxt/bg2.png" class="image" alt="" />
          <!-- <image src="../../../image/hxt/bg1.png" mode="" class="image" /> -->
          <div class="datacon">
            <div class="data_li">
              <div class="num">{{ order_count }}</div>
              <div class="text">全国总单数</div>
            </div>
            <div class="data_li">
              <!-- <i style="font-size: 0.75rem">万</i> -->
              <div class="num">{{ price_sum }} </div>
              <div class="text">累计总业绩</div>
            </div>
          </div>
        </div>
        <div>
          <div class="cirtype">
            <div class="round"></div>
            <div class="round_text">单数</div>
          </div>
          <div class="brokenline" @click.stop="hideToop('1')">
            <div style="height: 100%; width: 100%" ref="echartId" id="echartbox"></div>
          </div>
        </div>
      </div>
      <div class="botcon">
        <div class="con">
          <div class="top_two">
            <div class="title">业绩排行</div>
            <div class="day" @click="selectdayshow">
              <div class="day_name">{{ selecAareaname }}</div>
              <div class="icon">
                <img src="../../../assets/images/hxt/xia.png" class="image" />
              </div>
            </div>
          </div>
          <div class="four">
            <div class="fourli">
              <div class="li_tit">省份</div>
              <div class="li_text">{{ selecAareaname }}</div>
            </div>
            <div class="fourli">
              <div class="li_tit">总业绩</div>
              <div class="li_text">{{ money }}</div>
            </div>
            <div class="fourli">
              <div class="li_tit">总单数</div>
              <div class="li_text">{{ orders }}</div>
            </div>
            <div class="fourli">
              <div class="li_tit">总服务费</div>
              <div class="li_text">{{reward}}</div>
            </div>
          </div>

          <div class="table">
            <div class="tr">
              <div class="th">职位</div>
              <div class="th">总业绩</div>
              <div class="th">总单数</div>
              <div class="th">总服务费</div>
            </div>
            <div class="tr" v-for="(it,ind) in agencyInfo" :key="ind">
              <div class="td">{{ it.level_name }}</div>
              <div class="td">{{ it.money }}</div>
              <div class="td">{{ it.orders }}</div>
              <div class="td">{{ it.reward }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  style="padding-bottom: 1.5rem;" -->
    <div class="content" :style="{ display: tabInd == 1 ? 'block' : 'none' }">
      <div class="eclist">
        <div class="ectitle">{{ optionsChartArr[0] ? optionsChartArr[0].name : "" }}</div>
        <div class="cirtype">
          <div class="round"></div>
          <div class="round_text">单数</div>
        </div>
        <div class="brokenline" @click.stop="hideToop('2')">
          <div style="height: 100%; width: 100%" ref="echartId1" id="echartbox1"></div>
        </div>
      </div>
      <div class="eclist">
        <div class="ectitle">{{ optionsChartArr[1] ? optionsChartArr[1].name : "" }}</div>
        <div class="cirtype">
          <div class="round"></div>
          <div class="round_text">单数</div>
        </div>
        <div class="brokenline" @click.stop="hideToop('3')">
          <div style="height: 100%; width: 100%" ref="echartId2" id="echartbox2"></div>
        </div>
      </div>
      <div class="eclist">
        <div class="ectitle">{{ optionsChartArr[2] ? optionsChartArr[2].name : "" }}</div>
        <div class="cirtype">
          <div class="round"></div>
          <div class="round_text">单数</div>
        </div>
        <div class="brokenline" @click.stop="hideToop('4')">
          <div style="height: 100%; width: 100%" ref="echartId3" id="echartbox3"></div>
        </div>
      </div>
      <div class="eclist">
        <div class="ectitle">{{ optionsChartArr[3] ? optionsChartArr[3].name : "" }}</div>
        <div class="cirtype">
          <div class="round"></div>
          <div class="round_text">单数</div>
        </div>
        <div class="brokenline" @click.stop="hideToop('5')">
          <div style="height: 100%; width: 100%" ref="echartId4" id="echartbox4"></div>
        </div>
      </div>
      <div class="eclist">
        <div class="ectitle">{{ optionsChartArr[4] ? optionsChartArr[4].name : "" }}</div>
        <div class="cirtype">
          <div class="round"></div>
          <div class="round_text">单数</div>
        </div>
        <div class="brokenline" @click.stop="hideToop('6')">
          <div style="height: 100%; width: 100%" ref="echartId5" id="echartbox5"></div>
        </div>
      </div>
      <!-- <div style="padding: 0 0.9375rem;">
        <div class="btn">导出</div>
      </div> -->
    </div>
    <div @click="createImage" :style="{padding: '0.5rem 0.9375rem 2rem',background:tabInd == 0 ? '#ebf5ff' : '#fff'}">
      <div class="btn">导出</div>
    </div>
    <!-- <div class="btn">导出</div> -->


    <div class="popup" :class="{'popupshow':selecttime}">
      <div class="popup_top">
        <div class="top_le" @click="selectdayshow">取消</div>
        <div class="tit">请选择省份</div>
        <div class="top_ri" @click="selectdayshow('y')">确定</div>
      </div>
      <div class="scroll">
        <div class="popli " :class="{ 'popli_active':it.areaname == areaname }" v-for="(it,ind) in area" :key="it.id" @click="selectDay(ind,it)" >{{ it.areaname }}</div>
      </div>
    </div>
    <div class="popupbg" @click="selectdayshow"  v-if="selecttime"></div>
  </div>
</template>
<script>
import manageController from "./manageController";

export default manageController;
</script>
<style lang="scss" scoped>
:deep(.van-nav-bar__title) {
  color: #000 !important;
}
/* packageK/hxt/dataDisplay/dataDisplay.wxss */
div {
  box-sizing: border-box;
}
#page {
  background: #fff;
  min-height: 100vh;
}
.tabarr {
  display: flex;
  align-items: center;
  /* padding: 40rem 0 20rem; */
  height: 3.125rem;
}
.tabli {
  flex: 1;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
}
.tab_active {
  font-size: 1.0625rem;
  color: #000;
  position: relative;
  font-weight: 700;
}
.tab_active::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translate(-50%);
  width: 1rem;
  height: 0.125rem;
  border-radius: 0.0625rem;
  background: #1a6dfd;
}
.top {
  padding: 0 0.94rem 0;
}
.image {
  width: 100%;
  height: 100%;
}
.datacalss {
  height: 6rem;
  width: 100%;
  border-radius: 1.5rem;
  position: relative;
}
.datacon {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 66;
  color: #fff;
}
.data_li {
  flex: 1;
  text-align: center;
}
.data_li:nth-child(2) {
  border-left: 0.07rem solid #fff;
}
.num {
  font-weight: 700;
  font-size: 1.3rem;
}
.text {
  font-size: 0.75rem;
}

.botcon {
  background: #ebf5ff;
  min-height: calc(100vh - 728rpx);
  width: 100%;
  // padding: 1.25rem 0.9375rem 1.5625rem;
  padding: 1.25rem 0.9375rem 1rem;
  border-radius: 0.75rem 0.75rem 0 0;
  margin-top: 1rem;
}
.eclist {
  padding: 0.9375rem;
}
.ectitle {
  font-size: 1rem;
  font-weight: 700;
  color: #111111;
  text-align: left;
}
.cirtype {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.5rem;
  margin-top: 0.15rem;
  .round {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #4f8cf2;
  }
  .round_text {
    font-size: 0.75rem;
    /* font-weight: 700; */
    margin-left: 0.5rem;
  }
}
.brokenline {
  height: 12rem;
}

.con {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem 0.9375rem;
}
.top_two {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.9375rem;
  border-bottom: 0.029375rem solid #ebf5ff;
}
.title {
  font-size: 1rem;
  font-weight: 700;
}
.peron {
  display: flex;
  align-items: center;
}
.peron .icon {
  width: 1rem;
  height: 0.81rem;
  margin-right: 0.16rem;
  display: flex;
  align-items: center;
}
.per_num {
  font-size: 0.94rem;
}
.day {
  width: 5.63rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.day_name {
  font-size: 0.81rem;
  color: #394052;
}
.day .icon {
  width: 0.38rem;
  height: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.28rem;
}

.four {
  display: flex;
  align-items: center;
  height: 4.31rem;
  background: #f2f7ff;
  border-radius: 0.25rem;
}
.fourli {
  flex: 1;
  border-right: 0.03rem dashed #d8dcdf;
  text-align: center;
}
.fourli:nth-child(4) {
  border: none;
}
.li_tit {
  font-size: 0.75rem;
  color: #504f4e;
}
.li_text {
  font-size: 1rem;
  font-weight: 700;
}

.table {
  padding: 0.5rem 0;
}
.tr {
  height: 2.09rem;
  line-height: 2.09rem;
  /* text-align: center; */
  display: flex;
  align-items: center;
  border-bottom: 0.029375rem solid #f2f7ff;
}
.tr:last-child {
  border: none;
}
.th,
.td {
  flex: 1;
}
.th {
  font-size: 0.75rem;
  color: #504f4e;
}
.td {
  font-size: 0.88rem;
  color: #111;
  font-weight: 700;
}
.btn {
  height: 2.75rem;
  background: linear-gradient(to right, #478cff, #347fff);
  font-size: 0.94rem;
  color: #ffff;
  text-align: center;
  line-height: 2.75rem;
  // margin-top: 1.03rem;
  border-radius: 0.5rem;
}
.popup {
  width: 100%;
  height: 60vh;
  position: fixed;
  bottom: -60vh;
  left: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #fff;
  z-index: 6666;
  padding: 0.9375rem 0.9375rem 1.25rem;
  /* display: none; */
  transition: bottom 0.5s ease-in-out;
}
.popupshow {
  /* display: block; */
  bottom: 0;
}

.popupbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  opacity: 0.5;
  z-index: 77;
}
.popup .popup_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  border-bottom: 0.029375rem solid #f5f5f5;
  padding-bottom: 0.9375rem;
}
.popup .popup_top .top_le {
  font-size: 0.81rem;
  color: #999;
}
.popup .popup_top .top_ri {
  font-size: 0.81rem;
  color: #2979ff;
}
.popup .popup_top .tit {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2rem;
}
.scroll {
  height: calc(100% - 2em);
  overflow-y:auto ;
}
.popli {
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  font-size: 0.88rem;
  border-bottom: 0.029375rem solid #f5f5f5;
}
.popli_active {
  color: #1a6dfd;
  font-weight: 700;
}
</style>